<template>
    <div class="box">
        <div class="header">首页</div>
        <!-- 轮播图 -->
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="item in banner">
                <van-image :key="item.id" :src="item.url" width="100%" fit="contain" />
            </van-swipe-item>
        </van-swipe>
        <!-- 宫格列表 -->
        <van-grid :column-num="4">
            <van-grid-item v-for="item in icons" :key="item.id" :icon="item.url" :text="item.title" @click="jumps($event, item.id)" />
        </van-grid>

        <!-- 列表 -->
        <ul>
            <li style="font-size: 20px;"><strong>猜你想问</strong></li>
            <li>家长如何绑定学生账号<van-icon name="arrow" /></li>
            <li>忘记学生密码如何找回<van-icon name="arrow" /></li>
            <li>如何查询成绩<van-icon name="arrow" /></li>
            <li>家长查询不到成绩<van-icon name="arrow" /></li>
        </ul>
    </div>
</template>


<style scoped>
.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    width: 100%;
    text-align: center;
    background-color: #39a9ed;
}

ul {
    width: 100%;
    background-repeat: no-repeat;
    margin-top: 10px;
    background-image: url(/src/img/image.jpg);
    background-size: 100%;
    font-size: 18px;

    li {
        margin: 15px;
        position: relative;

        i {
            position: absolute;
            right: 20px;
            top: 5px;
        }
    }
}
</style>
<script lang="ts" setup>
import { getBanner } from '@/api/banner'
import { onMounted, ref } from 'vue'
import type { Ref } from 'vue'
import { useRouter } from 'vue-router';

const router = useRouter()

interface BannerIcon {
    url: string
    id: number
    title: string
}
let banner: Ref<Array<BannerIcon>> = ref<Array<BannerIcon>>([])
let icons: Ref<Array<BannerIcon>> = ref<Array<BannerIcon>>([])
onMounted(async () => {
    const { data } = await getBanner()
    banner.value = data.data.banner
    icons.value = data.data.icon
})

function jumps (e: Event, id: any) {
    if (id === 1000) {
        router.push('/achievement')
    } else if (id === 1002) {
        router.push('/analysis')
    } else if (id === 1007) {
        router.push('/wrongbook')
    }
}
</script>